<template>
  <div class="container">
    <div class="tabs-lb">
      <span>申请单{{ parseIsBatchFun(sqTableData) }}</span>
    </div>
    <div class="nlxq">
      <div class="title">通用能力授权申请</div>
      <div class="table-list">
        <nl-card
          class="nl-card"
          v-for="item in sqTableData"
          :key="item.jkbh"
          :data="item"
          type="nlsq"
          @clickRow="clickRow"
        ></nl-card>
      </div>
      <el-form ref="requireForm" :model="requireForm" label-width="100px">
        <el-form-item label="使用开始日期:">
          <el-date-picker type="date" placeholder="选择开始日期" v-model="requireForm.syksrq"></el-date-picker>
        </el-form-item>
        <el-form-item label="使用结束日期:">
          <el-date-picker type="date" placeholder="选择结束日期" v-model="requireForm.syjsrq"></el-date-picker>
        </el-form-item>
        <el-form-item label="应用系统:">
          <el-input class="iptWidth" v-model="requireForm.yyxt" placeholder="请输入应用系统"></el-input>
        </el-form-item>
        <el-form-item label="ip:">
          <el-input
            class="iptWidth"
            v-model="requireForm.dyryip"
            @input="requireForm.dyryip=requireForm.dyryip.replace(/[^\w\.\/]/ig,'')"
            placeholder="请输入ip"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请理由:">
          <el-input
            type="textarea"
            resize="none"
            placeholder="请输入申请理由"
            :rows="4"
            v-model="requireForm.sqly"
            maxlength="1000"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <el-button class="btns" :loading="loading" type="primary" @click="fqsq">发起申请</el-button>
      <div class="title">可申请的能力列表</div>
      <!-- 能力列表 -->
      <div class="table-list">
        <nl-card
          class="nl-card"
          v-for="item in tableData"
          :key="item.jkbh"
          :data="item"
          :checked="
            !!sqTableData.find(el => {
              return el.jkbh === item.jkbh
            })
          "
          type="nlsq"
          @clickRow="clickRow"
        ></nl-card>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          @size-change="changePageSize"
          @current-change="changePageNum"
          :current-page="form.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import dyglService from '@/api/dygl'
import jkglService from '@/api/jkgl'
import nlCard from '@/components/nl-card.vue'
export default {
  components: { nlCard },
  data() {
    return {
      // 选择要申请数据
      sqTableData: [],
      // 可申请数据
      tableData: [],
      requireForm: {
        // 开始日期
        syksrq: '',
        // 结束日期
        syjsrq: '',
        // 应用系统
        yyxt: '',
        // 申请理由
        sqly: '',
        // 订阅人员ip
        dyryip: '',
      },

      form: {
        pageNum: 1,
        pageSize: 10,
        filter: {
          jkmc: ''
        }
      },
      total: 0,
      loading: false,
      jkbh: ''
    }
  },
  mounted() {
    //获取路由信息
    this.getRouter()
    // 分页
    this.changePageNum(1)
  },
  methods: {
    /* 获取路由信息 */
    getRouter() {
      if (this.$route.query.cs) {
        this.jkbh = this.$route.query.cs
        // 默认选择点击的接口
        this.getNlxq()
      }
    },
    /*
     * 获取能力详情(修改)
     */
    getNlxq() {
      const params = {
        jkbh: this.jkbh
      }
      jkglService
        .getJkdy(params)
        .then(res => {
          this.sqTableData.push(res)
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    /*
     * 获取可申请能力列表
     */
    getSqList() {
      const params = { ...this.form }
      dyglService
        .queryKdynl(params)
        .then(res => {
          this.tableData = res.list
          this.total = res.total
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /*
     * 分页
     */
    changePageNum(val) {
      this.form.pageNum = val
      this.getSqList()
    },

    /*
     * 分页
     */
    changePageSize(val) {
      this.form.pageSize = val
      this.form.pageNum = 1
      this.getSqList()
    },

    /*
     * 将能力添加到申请列表
     */
    clickRow(type, data, checked) {
      if (type === 'checked') {
        if (checked) {
          this.sqTableData.push(data)
        } else {
          this.sqTableData = this.sqTableData.filter(el => {
            return el.jkbh !== data.jkbh
          })
        }
      }
    },

    /*
     * 发起能力申请
     */
    fqsq() {
      if (!this.requireForm.syksrq) {
        this.$message.warning('请输入使用开始日期')
        return
      }
      if (!this.requireForm.syjsrq) {
        this.$message.warning('请输入使用结束日期')
        return
      }
      if (!this.requireForm.yyxt) {
        this.$message.warning('请输入应用系统')
        return
      }
      if (!this.requireForm.dyryip) {
        this.$message.warning('请输入ip')
        return
      }
      if (!this.requireForm.sqly) {
        this.$message.warning('请输入申请理由')
        return
      }
      if (!this.sqTableData.length) {
        this.$message.warning('请选择要申请的能力')
        return
      }
      const params = {
        ...this.requireForm,
        jkbhList: this.sqTableData.map(el => el.jkbh)
      }
      this.loading = true
      dyglService
        .addNldy(params)
        .then(res => {
          this.loading = false
          this.$message.success('申请成功')
          this.$router.go(-1)
        })
        .catch(err => {
          this.loading = false
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    /*
     * 解析是否显示批量
     */
    parseIsBatchFun(list) {
      return list?.length > 1 ? '(批量)' : ''
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  .nlxq {
    margin-top: 20px;
    width: 100%;
    padding: 40px 30px;
    background: #fff;
    border: solid 1px #cecece;
    .title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin: 20px 0;
    }
    .content {
      color: #666666;
      font-size: 14px;
      margin: 20px 0;
    }
  }
  .table-list {
    margin-top: 20px;
  }
  .nl-card {
    width: 100%;
    height: 150px;
    margin-bottom: 20px;
  }
  .page {
    text-align: center;
  }
  .btns {
    margin: 20px 0 0 0;
  }
}

.iptWidth {
  width: 220px;
}
</style>
